<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    <a4j:loadStyle src="resource:/no-mehdi-usereg-web/src/main/webapp/flows/style/rspanel.xcss" />
    <h:form>
    
        <rich:panel>
            <f:facet name="header">
                <h:outputText value="Applying Skin on non-RichFaces Components"/>
            </f:facet>

            <div id="padding" style="padding: 20px">
            <h:commandLink value="DeepMarine">
                <a4j:actionparam name="skin" value="deepMarine" assignTo="#{skinBean.skin}"/>
            </h:commandLink>
            <rich:spacer width="20" />
            <h:commandLink value="BlueSky" >
                <a4j:actionparam name="skin" value="blueSky" assignTo="#{skinBean.skin}"/>
            </h:commandLink>
            <rich:spacer width="20" />
            <h:commandLink value="JapanCherry" >
                <a4j:actionparam name="skin" value="japanCherry" assignTo="#{skinBean.skin}"/>
            </h:commandLink>

            <rich:separator height="1"  style="padding:10px 0" />

            <h:panelGrid style="padding: 15px" styleClass="rsPanel" width="250" columns="2">
                <h:outputText styleClass="rsLabel" value="Name:" />
                <h:inputText  styleClass="rsInput"  value="#{userBean.name}" />
                
                <h:outputText styleClass="rsLabel" value="Job:" />
                <h:inputText  styleClass="rsInput"  value="#{userBean.job}" />
                
                <h:panelGroup />
                <h:commandButton styleClass="rsButton"  value="Submit">
                    <a4j:support  disableDefault="true" event="onclick" reRender="out" />
                </h:commandButton>
                
                <f:facet name="footer">
                </f:facet>
                        
            </h:panelGrid>
            <h:panelGrid id="out" columns="1">

            <rich:spacer height="10"/>
            <h:outputText value="You have just entered:"/>
            <h:outputText value=""/>
            <h:outputText value="Name: #{userBean.name}" />
            <h:outputText value="Job: #{userBean.job}" />
            </h:panelGrid>
            </div>
        </rich:panel>
    </h:form>

</ui:composition>